<template>
	<view class="video-preview">
		<video ref="videoPlayer" :src="videoSrc" :controls="true" :enable-progress-gesture="true"
			:show-progress-bar="true" :duration="duration" :current-time="currentTime"
			@timeupdate="onTimeUpdate"></video>

		<view class="knowledge_navigation" v-if="search">
			<view class="model" v-for="(item, index) in items" :key="index">
				<!-- <view class="title">时间段：{{ item.seg_time[0] }} 秒 -- -->
				<!-- {{ item.seg_time[1] }} 秒</view> -->
				<view class="title">
					<view>知识片段{{index+1}}</view>
					<u-icon v-if="item.ellipsis" name="arrow-right" color="#ccc" size="15"
						@click="open(item,index)"></u-icon>
					<u-icon v-else name="arrow-down" color="#ccc" size="15" @click="open(item,index)"></u-icon>
				</view>
				<view class="content" @click="handleNavigation(item)"
					:class="[item.node_id === activeTag.id ? 'tag_active' : '',item.ellipsis==true ? 'ellipsis' : '']">
					{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'preview',
		data() {
			return {
				info: {},
				search: false,
				analysisData: {},
				activeTag: {},
				player: null,
				items: [],
				videoSrc: '',
				duration: 0,
				currentTime: 0
			}
		},
		computed: {
			workflowHeight() {
				let height = document.documentElement.clientHeight || document.body.clientWidth
				height = (height - 46) * 2
				return {
					height: height + 'rpx'
				}
			}
		},
		methods: {
            init(obj) {
                this.info = obj ? obj.info : {}
                if (this.info.ext) {
                    this.items = this.info.ext.items
                    if (this.items) {
                        this.items.map(item => {
                            item.ellipsis = true
                        })
                    }
                }
                this.$nextTick(() => {
                    this.autoPlay()
                })
            },
            defaultAutoplay(src) {
                this.videoSrc = src
                // 重置进度条
                this.currentTime = 0
                this.$refs.videoPlayer.seek(0)
			},
			autoPlay() {
				this.$request({
					url: '/file/getUrl',
					method: 'get',
					params: {
						id: this.info.id,
					}
				}).then(({
					data
				}) => {
					// 动态切换视频源
					this.videoSrc = uni.$config.baseUrl + data.downloadUrl
					// 重置进度条
					this.currentTime = 0
					this.$refs.videoPlayer.seek(0)

				})
			},
			onTimeUpdate(e) {
				// console.log(e,'fff')
				// 更新进度条显示
				this.currentTime = e.detail.currentTime
				this.duration = e.detail.duration

				this.items.map(item => {
					if (e.detail.currentTime > item.seg_time[0] && e.detail.currentTime < item.seg_time[1]) {
						this.$set(this.activeTag, "id", item.node_id);
						this.$set(this.activeTag, "labelName", item.text);
					}
				})
			},
			// onTimeUpdate(currentTime) {
			//   // console.log("Current time:", currentTime.currentTime);
			//  this.items.map( item => {
			//     if( currentTime.currentTime > item.seg_time[0] && currentTime.currentTime < item.seg_time[1]){
			//         this.$set(this.activeTag, "id", item.node_id);
			//         this.$set(this.activeTag, "labelName", item.text);
			//     }
			//  })
			// },
			handleNavigation(navigation) {
				console.log(navigation, '555')
				this.$set(this.activeTag, "id", navigation.node_id);
				this.$set(this.activeTag, "labelName", navigation.text);
				// 操作视频播放器跳到对应位置 文件解析进入到对应位置
				// this.player.seek(navigation.seg_time[0]);
				this.$refs.videoPlayer.seek(navigation.seg_time[0])
			},
			open(item, index) {

				// return
				this.items[index].ellipsis = this.items[index].ellipsis == true ? false : true;

				this.$forceUpdate()
				console.log(this.items[index].ellipsis)
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-preview {
		width: 100%;

		#videoBox {
			padding: 0px !important;
			width: 100vw !important;
			min-height: 400rpx !important;
			// display: flex;
		}

		.knowledge_navigation {
			margin-top: 20rpx;
			padding: 20rpx;
			// background: red;
			height: 69vh;
			overflow-y: scroll;

			.model {
				border: 1rpx solid #ccc;
				margin-bottom: 20rpx;

				.title {
					border-bottom: 1rpx solid #ccc;
					padding: 10rpx;
					display: flex;
					justify-content: space-between;
				}

				.content {
					padding: 10rpx;
				}

				.ellipsis {
					height: 125rpx;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.tag_active {
					background: #67deb2;
					color: #fff;
				}
			}
		}
	}

	::v-deep #videoBox video {
		width: 100vw !important;
	}
</style>